<template>
	<view class="record-container">
			<view class="record-list">
				<view class="record-item" v-for="(item, index) in attitudeList2" :key="index">
					<view class="record-header">
						<text class="date">{{item.saName}}</text>
						<view class="score">
							<text class="label">态度评分</text>
							<text class="value" :class="getScoreClass(item.saScore)">{{item.saScore}}分</text>
						</view>
					</view>
					<view class="record-content">
						<view class="section">
							<text class="section-title">专业</text>
							<text class="section-content">{{item.saMajor}}</text>
						</view>
						<view class="section">
							<text class="section-title">年级</text>
							<text class="section-content">{{item.saGrade}}</text>
						</view>
						<view class="section">
							<text class="section-title">态度描述</text>
							<text class="section-content">{{item.saAcontent}}</text>
						</view>
						<view class="section">
							<text class="section-title">改进建议/计划</text>
							<text class="section-content">{{item.saPlan}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty">
				<image src="/static/empty.png" mode="aspectFit"></image>
				<text>暂无TA评我的记录</text>
			</view>
		</view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import {getattitude,getattitude2} from '@/api/attitude.js'
export default {
	setup() {
		const state = reactive({
			activeTab: 0,
			info:{
				sid: uni.getStorageSync("student").sSid,
				type: 2
			},
			attitudeList2: [],
			attitudeList: [
				{
					saName: '大壮',
					saMajor: '软件工程',
					saGrade: 2022,
					saScore: 85,
					saAcontent: '课堂参与度较高，能够认真听讲并积极回答问题。但是在课后复习方面还需要加强，有时会出现拖延的情况。',
					saPlan: '1. 制定每日复习计划，确保当天的课程内容当天复习\n2. 减少娱乐时间，将更多时间投入到学习中\n3. 培养提前预习的习惯'
				},
				{
					saName: '大壮',
					saMajor: '软件工程',
					saGrade: 2022,
					saScore: 85,
					saAcontent: '课堂参与度较高，能够认真听讲并积极回答问题。但是在课后复习方面还需要加强，有时会出现拖延的情况。',
					saPlan: '1. 制定每日复习计划，确保当天的课程内容当天复习\n2. 减少娱乐时间，将更多时间投入到学习中\n3. 培养提前预习的习惯'
				},
			]
		})
		function getattitudes(){
			getattitude(state.info.sid,state.info.type).then(res=>{
				if(res.code == 1){
					state.attitudeList = res.data;
				}
			})
		}
		function getattitudes2(){
			getattitude2(uni.getStorageSync("student").sName,uni.getStorageSync("student").sSpecialized,uni.getStorageSync("student").sGrade).then(res=>{
				if(res.code == 1){
					state.attitudeList2 = res.data;
				}
			})
		}
		getattitudes();
		getattitudes2();
		return {
			...toRefs(state)
		}
	},
	methods: {
		getScoreClass(score) {
			if (score >= 90) return 'excellent'
			if (score >= 80) return 'good'
			if (score >= 60) return 'normal'
			return 'poor'
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.tabs {
	display: flex;
	background: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(17,151,144,0.04);
}
.tab {
	flex: 1;
	text-align: center;
	padding: 28rpx 0;
	font-size: 30rpx;
	color: #119790;
	background: #fff;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
}
.tab.active {
	background: #119790;
	color: #fff;
}

.record-container {
	padding: 30rpx;
	
	.record-list {
		.record-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.record-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.date {
					font-size: 32rpx;
					color: #f11919;
					font-weight: 500;
				}
				
				.score {
					text-align: right;
					
					.label {
						font-size: 24rpx;
						color: #666;
						display: block;
						margin-bottom: 4rpx;
					}
					
					.value {
						font-size: 36rpx;
						font-weight: bold;
						
						&.excellent {
							color: #52c41a;
						}
						
						&.good {
							color: #119790;
						}
						
						&.normal {
							color: #faad14;
						}
						
						&.poor {
							color: #ff4d4f;
						}
					}
				}
			}
			
			.record-content {
				.section {
					margin-bottom: 20rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.section-title {
						font-size: 28rpx;
						color: #469e62;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.section-content {
						font-size: 28rpx;
						color: #333;
						line-height: 1.6;
					}
				}
			}
		}
	}
	
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style> 